<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg">
  <head>
    <title>Composable pictures</title>
    <link rel="stylesheet" type="text/css" href="docbook-epub.css"/>
    <link rel="stylesheet" type="text/css" href="kawa.css"/>
    <script src="kawa-ebook.js" type="text/javascript"/>
    <meta name="generator" content="DocBook XSL-NS Stylesheets V1.79.1"/>
    <link rel="prev" href="Miscellaneous.xhtml" title="Miscellaneous topics"/>
    <link rel="next" href="Building-JavaFX-applications.xhtml" title="Building JavaFX applications"/>
  </head>
  <body>
    <header/>
    <section class="sect1" title="Composable pictures" epub:type="subchapter" id="Composable-pictures">
      <div class="titlepage">
        <div>
          <div>
            <h2 class="title" style="clear: both">Composable pictures</h2>
          </div>
        </div>
      </div>
      <p>The <code class="literal">(kawa pictures)</code> library lets you create geometric shapes
and images, and combine them in interesting ways.
The <a class="link" href="tutorial-Pictures.xhtml" title="Composable pictures">tutorial</a> gives an introduction.
</p>
      <p>The easiest way to use and learn the <code class="literal">pictures</code> library
is with a suitable REPL.  You can use the old Swing-based console
or any <a class="link" href="REPL-Console.xhtml#Using-DomTerm">DomTerm</a>-based terminal emulator.
You can create a suitable window either by starting <code class="literal">kawa</code>
with the <code class="literal">-w</code> flag, or by running the <code class="literal">kawa</code> command
inside an existing DomTerm-based terminal emulator.
The screenshot below is of the latter,
using the <code class="literal">qtdomterm</code> terminal emulator.
</p>
      <div class="informalfigure">
        <div class="mediaobject">
          <img src="images/domterm-pictures-1.png"/>
        </div>
      </div>
      <p>After <code class="literal">(import (kawa swing))</code> you can use <code class="literal">show-picture</code>
to display a picture in a Swing window.
</p>
      <p>A <em class="firstterm">picture</em> is an object that can be displayed on a screen,
web-page, or printed page, and combined with other pictures.
</p>
      <p>A picture has a method printing itself in a graphical context.
It also has various properties.
</p>
      <p>An important property of a picture is its <em class="firstterm">bounding box</em>.
This is a rectangle (with edges parallel to the axes) that
surrounds the contents of the picture.
Usually the entire visible part of the picture is inside the
bounding box, but in some cases part of the picture may stick
outside the bounding box.
For example when a circle is drawn (stroked) with a “pen”,
the bounding box is that of the infinitely-thin mathematical circle, so
“ink” from the pen that is outside the circle may be outside the bounding box.
</p>
      <p>A picture has an origin point corresponding to the (0 0) cordinates.
The origin is commonly but not always inside the bounding box.
Certain operations (for example <code class="literal">hbox</code>) combine pictures by putting
them “next to” each other, where “next to” is defined in
terms of the bounding box and origin point.
</p>
      <section class="sect2" title="Coordinates - points and dimensions" epub:type="division" id="idm139667870078896">
        <div class="titlepage">
          <div>
            <div>
              <h3 class="title">Coordinates - points and dimensions</h3>
            </div>
          </div>
        </div>
        <p>The library works with a two-dimensional grid,
where each position has an x cordinate and y coordinate.
Normally, x values increase as you move right on the screen/page,
while y values increase as you move <span class="emphasis"><em>down</em></span>.
This convention matches that used by Java 2D, SVG, and many other
graphics library.  However, note that this is different from the traditional
mathematical convention of y values increasing as you go up.
</p>
        <p>By default, one unit is one “pixel”.  (More precisely,
it is the <code class="literal">px</code> unit in the CSS specification.)
</p>
        <p class="synopsis" kind="Type"><span class="kind">Type</span><span class="ignore">: </span><a id="idm139667870075200" class="indexterm"/> <code class="function">Point</code></p>
        <div class="blockquote">
          <blockquote class="blockquote">
            <p>A point is a pair consisting of an x and a y coordinate.
</p>
          </blockquote>
        </div>
        <p class="synopsis" kind="Literal"><span class="kind">Literal</span><span class="ignore">: </span><a id="idm139667870072192" class="indexterm"/> <span class="returnvalue"/> <code class="function">&amp;P<span class="bold"><strong>[</strong></span></code> <em class="replaceable"><code><em class="replaceable"><code>x</code></em></code></em> <em class="replaceable"><code><em class="replaceable"><code>y</code></em></code></em> <span class="type"><span class="bold"><strong>]</strong></span></span></p>
        <div class="blockquote">
          <blockquote class="blockquote">
            <p>Construct a point value with the specified <em class="replaceable"><code>x</code></em> and <em class="replaceable"><code>y</code></em> values.
Both <em class="replaceable"><code>x</code></em> and <em class="replaceable"><code>y</code></em> are expressions that evaluate to real numbers:
</p>
            <pre class="screen">&amp;P[(+ old-right 10) baseline]
</pre>
          </blockquote>
        </div>
        <p class="synopsis" kind="Type"><span class="kind">Type</span><span class="ignore">: </span><a id="idm139667870063984" class="indexterm"/> <code class="function">Dimension</code></p>
        <div class="blockquote">
          <blockquote class="blockquote">
            <p>A dimension value is a pair of a width and a height.
It is used for the size of pictures in the two dimensions.
</p>
            <p>In a context that expects a point, a dimension is treated
as an offset relative to some other point.
</p>
          </blockquote>
        </div>
        <p class="synopsis" kind="Literal"><span class="kind">Literal</span><span class="ignore">: </span><a id="idm139667870060432" class="indexterm"/> <span class="returnvalue"/> <code class="function">&amp;D<span class="bold"><strong>[</strong></span></code> <em class="replaceable"><code><em class="replaceable"><code>width</code></em></code></em> <em class="replaceable"><code><em class="replaceable"><code>height</code></em></code></em> <span class="type"><span class="bold"><strong>]</strong></span></span></p>
        <div class="blockquote">
          <blockquote class="blockquote">
            <p>Construct a dimension value with the specified <em class="replaceable"><code>width</code></em>
and <em class="replaceable"><code>height</code></em> values, which are both expressions that
evaluate to real numbers.
</p>
          </blockquote>
        </div>
      </section>
      <section class="sect2" title="Shapes" epub:type="division" id="idm139667870053184">
        <div class="titlepage">
          <div>
            <div>
              <h3 class="title">Shapes</h3>
            </div>
          </div>
        </div>
        <p>A shape is a collection of lines and curves.
Examples include lines, circles, and polygons.
A shape can be <em class="firstterm">stroked</em>, which you can think of as
being drawn by a very fancy calligraphic pen that
follows the lines and curves of the shape.
</p>
        <p>A <em class="firstterm">closed shape</em> is a shape that is continuous and ends up where it
started.  This includes circles and polygons.
A closed shape can be filled, which means the entire “interior”
is painted with some color or texture.
</p>
        <p>A shape is represented by the Java <code class="literal">java.awt.Shape</code> interface.
The <code class="literal">picture</code> library only provides relatively simple shapes,
but you can use any methods that create a <code class="literal">java.awt.Shape</code> object.
</p>
        <p><em class="firstterm">Shape</em> is effectively a sub-type of <em class="firstterm">picture</em>,
though they’re represented using using disjoint classes:
If you use a shape where a picture is required,
the shape is automatically converted to a picture,
as if using the <code class="literal">draw</code> procedure.
</p>
        <p class="synopsis" kind="Procedure"><span class="kind">Procedure</span><span class="ignore">: </span><a id="idm139667870046080" class="indexterm"/> <code class="function">line</code> <em class="replaceable"><code>p1</code></em> [<em class="replaceable"><code>p2</code></em> <em class="replaceable"><code>...</code></em>]</p>
        <div class="blockquote">
          <blockquote class="blockquote">
            <p>In the simple case two points are specified, and the result
is a line that goes from point <em class="replaceable"><code>p1</code></em> to <em class="replaceable"><code>p2</code></em>.
If <em class="replaceable"><code>n</code></em> points are specied, the result is a <em class="firstterm">polyline</em>:
a path consisting of <em class="replaceable"><code>n-1</code></em> line segments, connecting adjacent arguments.
(If only a single point is specified, the result is degenerate
single-point shape.)
</p>
            <p>All of the points except the first can optionally be specified
using a dimension, which is treated an an offset from the previous point:
</p>
            <pre class="screen">(line &amp;P[30 40] &amp;D[10 5] &amp;D[10 -10])
</pre>
            <p>is the same as:
</p>
            <pre class="screen">(line &amp;P[30 40] &amp;P[40 45] &amp;P[50 35])
</pre>
          </blockquote>
        </div>
        <p class="synopsis" kind="Procedure"><span class="kind">Procedure</span><span class="ignore">: </span><a id="idm139667870038048" class="indexterm"/> <code class="function">polygon</code> <em class="replaceable"><code>p1</code></em> [<em class="replaceable"><code>p2</code></em> <em class="replaceable"><code>...</code></em>]</p>
        <div class="blockquote">
          <blockquote class="blockquote">
            <p>Constructs a closed shape from line segments.
This is the same as calling <code class="literal">line</code> with the same arguments,
with the addition of a final line segment from the last point
back to the first point.
</p>
          </blockquote>
        </div>
        <p class="synopsis" kind="Procedure"><span class="kind">Procedure</span><span class="ignore">: </span><a id="idm139667870033200" class="indexterm"/> <code class="function">rectangle</code> <em class="replaceable"><code>p1</code></em> [<em class="replaceable"><code>p2</code></em>]</p>
        <div class="blockquote">
          <blockquote class="blockquote">
            <p>A rectangle is closed polygon of 4 line segments that are
alternatively parallel to the x-axis and the y-axis.
I.e. if you rotate a rectangle it is no longer a rectangle by
this definition, though of course it still has a rectangular shape.
If <em class="replaceable"><code>p2</code></em> is not specified, constructs a rectangle whose upper-left corner
is <code class="literal">&amp;P[0 0]</code> and whose lower-right corner is <em class="replaceable"><code>p1</code></em>.
If <em class="replaceable"><code>p2</code></em> is specified, constructs a rectangle whose upper-left corner
is <em class="replaceable"><code>p1</code></em> and whose lower-right corner is <em class="replaceable"><code>p2</code></em>.
If <em class="replaceable"><code>p2</code></em> is a dimension it is considered a relative offset from <em class="replaceable"><code>p1</code></em>,
just like for <code class="literal">polygon</code>.
</p>
          </blockquote>
        </div>
        <p class="synopsis" kind="Procedure"><span class="kind">Procedure</span><span class="ignore">: </span><a id="idm139667870025168" class="indexterm"/> <code class="function">circle</code> <em class="replaceable"><code>radius</code></em> [<em class="replaceable"><code>center</code></em>]</p>
        <div class="blockquote">
          <blockquote class="blockquote">
            <p>Creates a circle with the specified <em class="replaceable"><code>radius</code></em>.
If the <em class="replaceable"><code>center</code></em> is not specified, it defaults to <code class="literal">&amp;P[0 0]</code>.
</p>
          </blockquote>
        </div>
      </section>
      <section class="sect2" title="Colors and paints" epub:type="division" id="idm139667870019904">
        <div class="titlepage">
          <div>
            <div>
              <h3 class="title">Colors and paints</h3>
            </div>
          </div>
        </div>
        <p>A <em class="firstterm">paint</em> is a color pattern used to fill part of the canvas.
A paint can be a color, a texture (a replicated pattern), or a gradient
(a color that gradually fades to some other color).
</p>
        <p>A <em class="firstterm">color</em> is defined by red, green, and blue values.
It may also have an alpha component, which specifies transparency.
</p>
        <p class="synopsis" kind="Procedure"><span class="kind">Procedure</span><span class="ignore">: </span><a id="idm139667870016912" class="indexterm"/> <code class="function">-&gt;paint</code> <em class="replaceable"><code>value</code></em></p>
        <div class="blockquote">
          <blockquote class="blockquote">
            <p>Converts <em class="replaceable"><code>value</code></em> to a color - or more general a paint.
Specificlly, the return type is <code class="literal">java.awt.Paint</code>.
The <em class="replaceable"><code>value</code></em> can be any one of:
</p>
            <div class="itemizedlist" epub:type="list">
              <ul style="list-style-type: disc; " class="itemizedlist">
                <li class="listitem" epub:type="list-item">
                  <p>A <code class="literal">java.awt.Paint</code>, commonly a <code class="literal">java.awt.Color</code>.
</p>
                </li>
                <li class="listitem" epub:type="list-item">
                  <p>A 24-bit integer value is converted to a color.
Assume the integer is equal
to a hexadecimal literal of the form <code class="literal">#xRRGGBB</code>.
Then <code class="literal">RR</code> (bits 16-23) is the intensity of the red component;
<code class="literal">GG</code> (bits 8-15) is the intensity of the green component; and
<code class="literal">RR</code> (bits 0-7) is the intensity of the red component.
</p>
                </li>
                <li class="listitem" epub:type="list-item">
                  <p>One of the standard HTML/CSS/SVG color names, as a string or symbol.
See the table in <code class="literal">gnu/kawa/models/StandardColor.java</code> source file.
Case is ignored, and you can optionally use hyphens to separate words.
For example <code class="literal">'hot-pink</code>, <code class="literal">'hotpink</code>, and <code class="literal">'hotPink</code>
are all the same sRGB color <code class="literal">#xFF69B4</code>.
</p>
                </li>
              </ul>
            </div>
          </blockquote>
        </div>
        <p class="synopsis" kind="Procedure"><span class="kind">Procedure</span><span class="ignore">: </span><a id="idm139667870005632" class="indexterm"/> <code class="function">with-paint</code> <em class="replaceable"><code>paint</code></em> <em class="replaceable"><code>picture</code></em></p>
        <div class="blockquote">
          <blockquote class="blockquote">
            <p>Create a new picture that is the “same” as <em class="replaceable"><code>picture</code></em>
but use <em class="replaceable"><code>paint</code></em> as the default paint.
For <em class="replaceable"><code>paint</code></em> you can use any valid argument to <code class="literal">-&gt;paint</code>.
The default paint (which is the color black if none is specified)
is used for both <code class="literal">fill</code> (paint interior) and <code class="literal">draw</code> (stroke outline).
</p>
            <pre class="screen"><span class="prompt">#|kawa:1|# </span><strong class="userinput"><code>(! circ1 (circle 20 &amp;P[20 20]))</code></strong>
<span class="prompt">#|kawa:2|# </span><strong class="userinput"><code>(hbox (fill circ1) (draw circ1))</code></strong>
<img src="images/paint-circ-1.png"/>
<span class="prompt">#|kawa:3|# </span><strong class="userinput"><code>(with-paint 'hot-pink (hbox (fill circ1) (draw circ1)))</code></strong>
<img src="images/paint-circ-2.png"/>
</pre>
            <p>Above we use <code class="literal">with-paint</code> to create a cloned picture, which is
the same as the original <code class="literal">hbox</code>, except for the default paint,
in this case the color <code class="literal">hot-pink</code>.
</p>
            <pre class="screen"><span class="prompt">#|kawa:4|# </span><strong class="userinput"><code>(! circ2 (hbox (fill circ1) (with-paint 'hot-pink (fill circ1))))</code></strong>
<span class="prompt">#|kawa:5|# </span><strong class="userinput"><code>circ2</code></strong>
<img src="images/paint-circ-3.png"/>
<span class="prompt">#|kawa:6|# </span><strong class="userinput"><code>(with-paint 'lime-green circ2)</code></strong>
<img src="images/paint-circ-4.png"/>
</pre>
            <p>Here <code class="literal">circ2</code> is an <code class="literal">hbox</code> of two filled circles,
one that has unspecified paint, and one that is <code class="literal">hot-pink</code>.
Printing <code class="literal">circ2</code> directly uses black for the
circle with unspecified color,
but if we wrap <code class="literal">circ2</code> in another <code class="literal">with-paint</code>
that provides a default that is used for the first circle.
</p>
          </blockquote>
        </div>
      </section>
      <section class="sect2" title="Filling a shape with a color" epub:type="division" id="idm139667869985312">
        <div class="titlepage">
          <div>
            <div>
              <h3 class="title">Filling a shape with a color</h3>
            </div>
          </div>
        </div>
        <p class="synopsis" kind="Procedure"><span class="kind">Procedure</span><span class="ignore">: </span><a id="idm139667869984224" class="indexterm"/> <code class="function">fill</code> <em class="replaceable"><code>shape</code></em></p>
        <p class="synopsis" kind="Procedure"><span class="kind">Procedure</span><span class="ignore">: </span><a id="idm139667869981392" class="indexterm"/> <code class="function">fill</code> <em class="replaceable"><code>paint</code></em> <em class="replaceable"><code>shape</code></em></p>
        <div class="blockquote">
          <blockquote class="blockquote">
            <p>Fill the “inside” of <em class="replaceable"><code>shape</code></em>.
If no <em class="replaceable"><code>paint</code></em> is specified, uses the current default paint.
Otherwise, <code class="literal">(fill <em class="replaceable"><code>paint</code></em> <em class="replaceable"><code>shape</code></em>)</code>
is the same <code class="literal">(with-paint <em class="replaceable"><code>paint</code></em> (file <em class="replaceable"><code>shape</code></em>))</code>.
</p>
          </blockquote>
        </div>
      </section>
      <section class="sect2" title="Stroking (outlining) a shape" epub:type="division" id="idm139667869973952">
        <div class="titlepage">
          <div>
            <div>
              <h3 class="title">Stroking (outlining) a shape</h3>
            </div>
          </div>
        </div>
        <p class="synopsis" kind="Procedure"><span class="kind">Procedure</span><span class="ignore">: </span><a id="idm139667869972864" class="indexterm"/> <code class="function">draw</code> <em class="replaceable"><code>option</code></em><em class="replaceable"><code><sup>*</sup></code></em> <em class="replaceable"><code>shape</code></em><em class="replaceable"><code><sup>+</sup></code></em></p>
        <div class="blockquote">
          <blockquote class="blockquote">
            <p>Returns a picture that draws the outline of the <em class="replaceable"><code>shape</code></em>.
This is called <em class="firstterm">stroking</em>.
An <em class="replaceable"><code>option</code></em> may be one of:
</p>
            <div class="itemizedlist" epub:type="list">
              <ul style="list-style-type: disc; " class="itemizedlist">
                <li class="listitem" epub:type="list-item">
                  <p>A <code class="literal">Paint</code> or <code class="literal">Color</code> object, which is used to draw the shape.
</p>
                </li>
                <li class="listitem" epub:type="list-item">
                  <p>A standard color name, such as <code class="literal">'red</code> or <code class="literal">'medium-slate-blue</code>.
This is mapped to a <code class="literal">Color</code>.
</p>
                </li>
                <li class="listitem" epub:type="list-item">
                  <p>A join-specifier, which is a symbol specifying how each curve of the shape is
connected to the next one.
The options are <code class="literal">'miter-join</code>, <code class="literal">'round-join</code>, and <code class="literal">'bevel-join</code>.
The default if none is specified is <code class="literal">'miter-join</code>.
</p>
                </li>
                <li class="listitem" epub:type="list-item">
                  <p>A end-cap-specifier, which is a symbol specifying how each end of the
shape is terminated.
The options are <code class="literal">'square-cap</code>, <code class="literal">'round-cap</code>, or <code class="literal">'butt-cap</code>.
The default is <code class="literal">'butt-cap</code>.
(This follows SVG and HTML Canvas.
The default in plain Java AWT is a square cap.)
</p>
                </li>
                <li class="listitem" epub:type="list-item">
                  <p>A real number specifies the thickness of the stroke.
</p>
                </li>
                <li class="listitem" epub:type="list-item">
                  <p>A <code class="literal">java.awt.Stroke</code> object.
This combines join-specifier, end-cap-specifier, thickness, and more
in a single object.  The <code class="literal">BasicStroke</code> class can specify dashes,
though that is not yet supported for SVG output; only AWT or image output.
</p>
                </li>
              </ul>
            </div>
            <p>Let us illustrate with a sample line <code class="literal">lin</code>
and a helper macro <code class="literal">show-draw</code>, which adds a border around a shape,
then draws the given shape with some options, and finally
re-draws the shape in plain form.
</p>
            <pre class="screen"><span class="prompt">#|kawa:10|# </span><strong class="userinput"><code>(define lin (line &amp;P[0 0] &amp;P[300 40] &amp;P[200 100] &amp;P[50 70]))</code></strong>
<span class="prompt">#|kawa:11|# </span><strong class="userinput"><code>(define-syntax show-draw</code></strong>
<span class="prompt">#|....:12|# </span><strong class="userinput"><code>  (syntax-rules ()</code></strong>
<span class="prompt">#|....:13|# </span><strong class="userinput"><code>    ((_ options ... shape)</code></strong>
<span class="prompt">#|....:14|# </span><strong class="userinput"><code>     (border 12 'bisque (zbox (draw options ... shape) shape)))))</code></strong>
<span class="prompt">#|....:15|# </span><strong class="userinput"><code>(show-draw 8 'lime lin)</code></strong>
<img src="images/show-draw-1.png"/>
<span class="prompt">#|....:16|# </span><strong class="userinput"><code>(show-draw 8 'lime 'round-cap 'round-join lin)</code></strong>
<img src="images/show-draw-2.png"/>
<span class="prompt">#|....:17|# </span><strong class="userinput"><code>(show-draw 8 'lime 'square-cap 'bevel-join lin)</code></strong>
<img src="images/show-draw-3.png"/>
</pre>
          </blockquote>
        </div>
        <p>Notice how the different cap and join styles change the drawing.
Also note how the stroke (color lime) extends beyond its bounding box,
into the surrounding border (color bisque).
</p>
      </section>
      <section class="sect2" title="Affine transforms" epub:type="division" id="idm139667869946288">
        <div class="titlepage">
          <div>
            <div>
              <h3 class="title">Affine transforms</h3>
            </div>
          </div>
        </div>
        <p>A 2D affine transform is a linear mapping from coordinates to
coordinates.  It generalizes translation, scaling, flipping, shearing,
and their composition.  An affine transform maps straight parallel lines
into other straight parallel lines, so it is only a subset of possible
mappings - but a very useful subset.
</p>
        <p class="synopsis" kind="Procedure"><span class="kind">Procedure</span><span class="ignore">: </span><a id="idm139667869944496" class="indexterm"/> <code class="function">affine-transform</code> <em class="replaceable"><code>xx</code></em> <em class="replaceable"><code>xy</code></em> <em class="replaceable"><code>yx</code></em> <em class="replaceable"><code>yy</code></em> <em class="replaceable"><code>x0</code></em> <em class="replaceable"><code>y0</code></em></p>
        <p class="synopsis" kind="Procedure"><span class="kind">Procedure</span><span class="ignore">: </span><a id="idm139667869939632" class="indexterm"/> <code class="function">affine-transform</code> <em class="replaceable"><code>px</code></em> <em class="replaceable"><code>py</code></em> <em class="replaceable"><code>p0</code></em></p>
        <div class="blockquote">
          <blockquote class="blockquote">
            <p>Creates a new affine transform.
The result of applying <code class="literal">(affine-transform <em class="replaceable"><code>x<sub>x</sub></code></em> <em class="replaceable"><code>x<sub>y</sub></code></em> <em class="replaceable"><code>y<sub>x</sub></code></em> <em class="replaceable"><code>y<sub>y</sub></code></em> <em class="replaceable"><code>x<sub>0</sub></code></em> <em class="replaceable"><code>y<sub>0</sub></code></em>)</code>
to the point <code class="literal">&amp;P[<em class="replaceable"><code>x</code></em> <em class="replaceable"><code>y</code></em>]</code>
is the transformed point
</p>
            <pre class="screen">&amp;P[(+ (* <em class="replaceable"><code>x</code></em> <em class="replaceable"><code>x<sub>x</sub></code></em>) (* <em class="replaceable"><code>y</code></em> <em class="replaceable"><code>y<sub>x</sub></code></em>) <em class="replaceable"><code>x<sub>0</sub></code></em>)
   (+ (* <em class="replaceable"><code>x</code></em> <em class="replaceable"><code>x<sub>y</sub></code></em>) (* <em class="replaceable"><code>y</code></em> <em class="replaceable"><code>y<sub>y</sub></code></em>) <em class="replaceable"><code>y<sub>0</sub></code></em>)]
</pre>
            <p>If using point arguments,
<code class="literal">(affine-transform &amp;P[<em class="replaceable"><code>x<sub>x</sub></code></em> <em class="replaceable"><code>x<sub>y</sub></code></em>] &amp;P[<em class="replaceable"><code>y<sub>x</sub></code></em> <em class="replaceable"><code>y<sub>y</sub></code></em>] &amp;P[<em class="replaceable"><code>x<sub>0</sub></code></em> <em class="replaceable"><code>y<sub>0</sub></code></em>])</code>
is equivalent to:
<code class="literal">(affine-transform <em class="replaceable"><code>x<sub>x</sub></code></em> <em class="replaceable"><code>x<sub>y</sub></code></em> <em class="replaceable"><code>y<sub>x</sub></code></em> <em class="replaceable"><code>y<sub>y</sub></code></em> <em class="replaceable"><code>x<sub>0</sub></code></em> <em class="replaceable"><code>y<sub>0</sub></code></em>)</code>.
</p>
          </blockquote>
        </div>
        <p class="synopsis" kind="Procedure"><span class="kind">Procedure</span><span class="ignore">: </span><a id="idm139667869915104" class="indexterm"/> <code class="function">with-transform</code> <em class="replaceable"><code>transform</code></em> <em class="replaceable"><code>picture</code></em></p>
        <p class="synopsis" kind="Procedure"><span class="kind">Procedure</span><span class="ignore">: </span><a id="idm139667869911856" class="indexterm"/> <code class="function">with-transform</code> <em class="replaceable"><code>transform</code></em> <em class="replaceable"><code>shape</code></em></p>
        <div class="blockquote">
          <blockquote class="blockquote">
            <p>Creates a transformed picture.
</p>
            <p>If the argument is a <em class="replaceable"><code>shape</code></em>, then the result is also a shape.
</p>
          </blockquote>
        </div>
        <p class="synopsis" kind="Procedure"><span class="kind">Procedure</span><span class="ignore">: </span><a id="idm139667869907168" class="indexterm"/> <code class="function">with-transform</code> <em class="replaceable"><code>transform</code></em> <em class="replaceable"><code>point</code></em></p>
        <div class="blockquote">
          <blockquote class="blockquote">
            <p>Apply a transform to a single point, yielding a new point.
</p>
          </blockquote>
        </div>
        <p class="synopsis" kind="Procedure"><span class="kind">Procedure</span><span class="ignore">: </span><a id="idm139667869903328" class="indexterm"/> <code class="function">with-transform</code> <em class="replaceable"><code>transform1</code></em> <em class="replaceable"><code>transform2</code></em></p>
        <div class="blockquote">
          <blockquote class="blockquote">
            <p>Combine two transforms, yielding the composed transform.
</p>
          </blockquote>
        </div>
        <p class="synopsis" kind="Procedure"><span class="kind">Procedure</span><span class="ignore">: </span><a id="idm139667869899488" class="indexterm"/> <code class="function">rotate</code> <em class="replaceable"><code>angle</code></em></p>
        <p class="synopsis" kind="Procedure"><span class="kind">Procedure</span><span class="ignore">: </span><a id="idm139667869896656" class="indexterm"/> <code class="function">rotate</code> <em class="replaceable"><code>angle</code></em> <em class="replaceable"><code>picture</code></em></p>
        <div class="blockquote">
          <blockquote class="blockquote">
            <p>The one-argument variant creates a new affine transform that rotates
a picture about the origin by the specified <em class="replaceable"><code>angle</code></em>.
A positive <em class="replaceable"><code>angle</code></em> yields a clockwise rotation.
The <em class="replaceable"><code>angle</code></em> can be either a quantity (with a unit of
either <code class="literal">rad</code> radians, <code class="literal">deg</code> (degrees), or <code class="literal">grad</code> (gradians)),
or it can be a unit-less real number (which is treated as degrees).
</p>
            <p>The two-argument variant applies the resulting transform to
the specified picture.  It is equivalent to:
</p>
            <pre class="screen">(with-transform (rotate <em class="replaceable"><code>angle</code></em>) <em class="replaceable"><code>picture</code></em>)
</pre>
          </blockquote>
        </div>
        <p class="synopsis" kind="Procedure"><span class="kind">Procedure</span><span class="ignore">: </span><a id="idm139667869888384" class="indexterm"/> <code class="function">scale</code> <em class="replaceable"><code>factor</code></em></p>
        <p class="synopsis" kind="Procedure"><span class="kind">Procedure</span><span class="ignore">: </span><a id="idm139667869885552" class="indexterm"/> <code class="function">scale</code> <em class="replaceable"><code>factor</code></em> <em class="replaceable"><code>picture</code></em></p>
        <div class="blockquote">
          <blockquote class="blockquote">
            <p>Scales the <em class="replaceable"><code>picture</code></em> by the given <em class="replaceable"><code>factor</code></em>.
The <em class="replaceable"><code>factor</code></em> can be a real number.
The <em class="replaceable"><code>factor</code></em> can also be a point or a dimension, in which case
the two cordinates are scaled by a different amount.
</p>
            <p>The two-argument variant applies the resulting transform to
the specified picture.  It is equivalent to:
</p>
            <pre class="screen">(with-transform (scale <em class="replaceable"><code>factor</code></em>) <em class="replaceable"><code>picture</code></em>)
</pre>
          </blockquote>
        </div>
        <p class="synopsis" kind="Procedure"><span class="kind">Procedure</span><span class="ignore">: </span><a id="idm139667869878224" class="indexterm"/> <code class="function">translate</code> <em class="replaceable"><code>offset</code></em></p>
        <p class="synopsis" kind="Procedure"><span class="kind">Procedure</span><span class="ignore">: </span><a id="idm139667869875392" class="indexterm"/> <code class="function">translate</code> <em class="replaceable"><code>offset</code></em> <em class="replaceable"><code>picture</code></em></p>
        <div class="blockquote">
          <blockquote class="blockquote">
            <p>The single-argument variant creates a transform
that adds the <em class="replaceable"><code>offset</code></em> to each point.
The <em class="replaceable"><code>offset</code></em> can be either a point or a dimension (which
are treated quivalently).
</p>
            <p>The two-argument variant applies the resulting transform to
the specified picture.  It is equivalent to:
</p>
            <pre class="screen">(with-transform (translate <em class="replaceable"><code>offset</code></em>) <em class="replaceable"><code>picture</code></em>)
</pre>
          </blockquote>
        </div>
      </section>
      <section class="sect2" title="Combining pictures" epub:type="division" id="idm139667869868832">
        <div class="titlepage">
          <div>
            <div>
              <h3 class="title">Combining pictures</h3>
            </div>
          </div>
        </div>
        <p class="synopsis" kind="Procedure"><span class="kind">Procedure</span><span class="ignore">: </span><a id="idm139667869867760" class="indexterm"/> <code class="function">hbox</code> [<em class="replaceable"><code>spacing</code></em>] <em class="replaceable"><code>picture</code></em> <em class="replaceable"><code>...</code></em></p>
        <p class="synopsis" kind="Procedure"><span class="kind">Procedure</span><span class="ignore">: </span><a id="idm139667869864128" class="indexterm"/> <code class="function">vbox</code> [<em class="replaceable"><code>spacing</code></em>] <em class="replaceable"><code>picture</code></em> <em class="replaceable"><code>...</code></em></p>
        <p class="synopsis" kind="Procedure"><span class="kind">Procedure</span><span class="ignore">: </span><a id="idm139667869860496" class="indexterm"/> <code class="function">zbox</code> <em class="replaceable"><code>picture</code></em> <em class="replaceable"><code>...</code></em></p>
        <div class="blockquote">
          <blockquote class="blockquote">
            <p>Make a combined picture from multiple sub-pictures drawn
either “next to” or “on top of” each other.
</p>
            <p>The case of <code class="literal">zbox</code> is simplest: The sub-pictures are drawn
in argument order at the same position (origin).  The “<code class="literal">z</code>” refers to
the idea that the pictures are stacked on top of each other along
the “Z-axis” (the one perpendicular to the screen).
</p>
            <p>The <code class="literal">hbox</code> and <code class="literal">vbox</code> instead place the sub-pictures
next to each other, in a row or column.
If <em class="replaceable"><code>spacing</code></em> is specified, if must be a real number.
That much extra spacing is added between each sub-picture.
</p>
            <p>More precisely: <code class="literal">hbox</code> shifts each sub-picture except the first
so its left-origin control-point
(see discussion at <code class="literal">re-center</code>) has the same position
as the right-origin control point of the previous picture
<em class="replaceable"><code>plus</code></em> the amount of <em class="replaceable"><code>spacing</code></em>.
Similarly, <code class="literal">vbox</code> shifts each sub-picture except the first
so its top-origin control point has the same position
as the bottom-origin point of the previous picture, plus <em class="replaceable"><code>spacing</code></em>.
</p>
            <p>The bounding box of the result is the smallest rectangle that
includes the bounding boxes of the (shifted) sub-pictures.
The origin of the result is that of the first picture.
</p>
          </blockquote>
        </div>
        <p class="synopsis" kind="Procedure"><span class="kind">Procedure</span><span class="ignore">: </span><a id="idm139667869849168" class="indexterm"/> <code class="function">border</code> [<em class="replaceable"><code>size</code></em> [<em class="replaceable"><code>paint</code></em>]] <em class="replaceable"><code>picture</code></em></p>
        <div class="blockquote">
          <blockquote class="blockquote">
            <p>Return a picture that combines <em class="replaceable"><code>picture</code></em>
with a rectangular border (frame) around <em class="replaceable"><code>picture</code></em>’s bounding box.
The <em class="replaceable"><code>size</code></em> specifies the thickness of the border:
it can be real number, in which it is the thickness on all four sides;
it can be a Dimension, in which case the width is the left and right
thickness, while the height is the top and bottom thickness;
or it can be a Rectangle, in which case it is the new bounding box.
If <em class="replaceable"><code>paint</code></em> is specified it is used for the border;
otherwise the default paint is used.
The border is painted before (below) the <em class="replaceable"><code>picture</code></em> painted.
The bounding box of the result is that of the border, while
the origin point is that of the original <em class="replaceable"><code>picture</code></em>.
</p>
            <pre class="screen"><span class="prompt">#|kawa:2|# </span><strong class="userinput"><code>(with-paint 'blue (border &amp;D[8 5] (fill 'pink (circle 30))))</code></strong>
<img src="images/border-1.png"/>
</pre>
          </blockquote>
        </div>
        <p class="synopsis" kind="Procedure"><span class="kind">Procedure</span><span class="ignore">: </span><a id="idm139667869839712" class="indexterm"/> <code class="function">padding</code> <em class="replaceable"><code>width</code></em> [<em class="replaceable"><code>background</code></em>] <em class="replaceable"><code>picture</code></em></p>
        <div class="blockquote">
          <blockquote class="blockquote">
            <p>This is similar to <code class="literal">border</code>,
but it just adds extra space around <em class="replaceable"><code>picture</code></em>,
without painting it.  The <em class="replaceable"><code>size</code></em> is specified the same way.
If <em class="replaceable"><code>background</code></em> is specified,
it becomes the background paint for the entire padded
rectangle (both <em class="replaceable"><code>picture</code></em> and the extra padding).
</p>
            <pre class="screen"><span class="prompt">#|kawa:3|# </span><strong class="userinput"><code>(define circ1 (fill 'teal (circle 25)))</code></strong>
<span class="prompt">#|kawa:4|# </span><strong class="userinput"><code>(zbox (line &amp;P[-30 20] &amp;P[150 20])</code></strong>
<span class="prompt">#|kawa:5|# </span><strong class="userinput"><code>  (hbox circ1 (padding 6 'yellow circ1) (padding 6 circ1)))</code></strong>
<img src="images/padding-1.png"/>
</pre>
            <p>This shows a circle drawn three ways:
as-is; with padding and a background color;
with padding and a transparent background.
A line is drawn before (below) the circles to contrast
the yellow vs transparent backgrounds.
</p>
          </blockquote>
        </div>
        <p class="synopsis" kind="Procedure"><span class="kind">Procedure</span><span class="ignore">: </span><a id="idm139667869829248" class="indexterm"/> <code class="function">re-center</code> [<em class="replaceable"><code>xpos</code></em>] [<em class="replaceable"><code>ypos</code></em>] <em class="replaceable"><code>picture</code></em></p>
        <div class="blockquote">
          <blockquote class="blockquote">
            <p>Translate the <em class="replaceable"><code>picture</code></em> such that the point specified by <em class="replaceable"><code>xpos</code></em>
and <em class="replaceable"><code>ypos</code></em> is the new origin point, adjusting the bounding box to match.
If the <em class="replaceable"><code>picture</code></em> is a shape, so is the result.
</p>
            <p>The <em class="replaceable"><code>xpos</code></em> can have four possible values, all of which are symbols:
<code class="literal">'left</code> (move the origin to the left edge of the bounding box);
<code class="literal">'right</code> (move the origin to the left edge of the bounding box);
<code class="literal">'center</code> (or <code class="literal">'centre</code>) (move the origin to halfway between the left and right edges);
or <code class="literal">'origin</code> (don’t change the location along the x-axis).
The <em class="replaceable"><code>ypos</code></em> can likewise have four possible values:
<code class="literal">'top</code> (move the origin to the top edge of the bounding box);
<code class="literal">'bottom</code> (move the origin to the bottom edge of the bounding box);
<code class="literal">'center</code> (or <code class="literal">'centre</code>) (move the origin to halfway between the
top and bottom edges);
or <code class="literal">'origin</code> (don’t change the location along the y-axis).
</p>
            <p>A single <code class="literal">'center</code> argument
is the same as specifying <code class="literal">'center</code> for both axis; this is the default.
A single <code class="literal">'origin</code> argument
is the same as specifying <code class="literal">'origin</code> for both axis;
this is the same as just <em class="replaceable"><code>picture</code></em>.
</p>
            <p>The 16 control points are shown below, relative to a picture’s
bounding box and the X- and Y-axes.
The abbreviations have the obvious values, for example
<code class="literal">LC</code> means <code class="literal">'left 'center</code>.
</p>
            <pre class="screen">LT    OT  CT      RT
  ┌────┬──────────┐
  │    │          │
  │    │          │
LC│   OC  C       │RC
LO├────O──CO──────┤RO
  │    │          │
  └────┴──────────┘
LB    OB  CB       RB   
</pre>
            <p>The result of (for example) <code class="literal">(re-center 'left 'center <em class="replaceable"><code>P</code></em>)</code>
is <em class="replaceable"><code>P</code></em> translated so the origin is at control point <code class="literal">LC</code>.
</p>
            <pre class="screen"><span class="prompt">#|kawa:1|# </span><strong class="userinput"><code>(define D (fill 'light-steel-blue (polygon &amp;P[-20 0] &amp;P[0 -20] &amp;P[60 0] &amp;P[0 40])))</code></strong>
<span class="prompt">#|kawa:2|# </span><strong class="userinput"><code>(zbox D (draw 'red (circle 5)))</code></strong>
<img src="images/re-center-1.png"/>
</pre>
            <p>Above we defined <code class="literal">D</code> as a vaguely diamond-shaped quadrilateral.
A small red circle is added to show the origin point.
Below we display 5 versions of <code class="literal">D</code> in a line (an <code class="literal">hbox</code>),
starting with the original <code class="literal">D</code> and 4 calls to <code class="literal">re-center</code>.
</p>
            <pre class="screen"><span class="prompt">#|kawa:3|# </span><strong class="userinput"><code>(zbox (hbox D (re-center 'top D) (re-center 'bottom D)</code></strong>
<span class="prompt">#|....:4|# </span><strong class="userinput"><code>              (re-center 'center D) (re-center 'origin D))</code></strong>
<span class="prompt">#|....:5|# </span><strong class="userinput"><code>  (line &amp;P[0 0] &amp;P[300 0]))</code></strong>
<img src="images/re-center-2.png"/>
</pre>
            <p>The line at <em class="replaceable"><code>y=0</code></em> shows the effects of <code class="literal">re-center</code>.
</p>
          </blockquote>
        </div>
      </section>
      <section class="sect2" title="Images" epub:type="division" id="idm139667869799600">
        <div class="titlepage">
          <div>
            <div>
              <h3 class="title">Images</h3>
            </div>
          </div>
        </div>
        <p>An image is a picture represented as a rectangular grid of color values.
An image file is some encoding (usually compressed) of an image,
and mostly commonly has the extensions <code class="literal">png</code>, <code class="literal">gif</code>,
or <code class="literal">jpg</code>/<code class="literal">jpeg</code>.
</p>
        <p>A “native image” is an instance of <code class="literal">java.awt.image.BufferedImage</code>,
while a “picture image” is an instance of <code class="literal">gnu.kawa.models.DrawImage</code>.
(Both classes implement the <code class="literal">java.awt.image.RenderedImage</code> interface.)
A <code class="literal">BufferedImage</code> is automatically converted to a <code class="literal">DrawImage</code>
when needed.
</p>
        <p class="synopsis" kind="Procedure"><span class="kind">Procedure</span><span class="ignore">: </span><a id="idm139667869793488" class="indexterm"/> <code class="function">image</code> <em class="replaceable"><code>bimage</code></em></p>
        <p class="synopsis" kind="Procedure"><span class="kind">Procedure</span><span class="ignore">: </span><a id="idm139667869790656" class="indexterm"/> <code class="function">image</code> <em class="replaceable"><code>picture</code></em></p>
        <p class="synopsis" kind="Procedure"><span class="kind">Procedure</span><span class="ignore">: </span><a id="idm139667869787824" class="indexterm"/> <code class="function">image</code> <em class="replaceable"><code>src:</code></em> <em class="replaceable"><code>path</code></em></p>
        <div class="blockquote">
          <blockquote class="blockquote">
            <p>Creates a picture image, using either an existing native image <em class="replaceable"><code>bimage</code></em>,
or an image file specified by <em class="replaceable"><code>path</code></em>.
</p>
            <p>Writing <code class="literal">(image src: <em class="replaceable"><code>path</code></em>)</code> is roughly the same
as <code class="literal">(image (read-image <em class="replaceable"><code>path</code></em>))</code> except that the former
has the <em class="replaceable"><code>path</code></em> associated with the resulting picture image.
This can make a difference when the image is used or displayed.
</p>
            <p>If the argument is a <em class="replaceable"><code>picture</code></em>, it is converted to an image
as if by <code class="literal">-&gt;image</code>.
</p>
          </blockquote>
        </div>
        <p class="synopsis" kind="Procedure"><span class="kind">Procedure</span><span class="ignore">: </span><a id="idm139667869778960" class="indexterm"/> <code class="function">image-read</code> <em class="replaceable"><code>path</code></em></p>
        <div class="blockquote">
          <blockquote class="blockquote">
            <p>Read an image file from the specified <em class="replaceable"><code>path</code></em>,
and returns a native image object (a <code class="literal">BufferedImage</code>).
</p>
            <pre class="screen"><span class="prompt">#|kawa:10|# </span><strong class="userinput"><code>(define img1 (image-read "http://pics.bothner.com/2013/Cats/06t.jpg"))</code></strong>
<span class="prompt">#|kawa:11|# </span><strong class="userinput"><code>img1</code></strong>
<img src="images/image-cat-1a.png"/>
<span class="prompt">#|kawa:12|# </span><strong class="userinput"><code>(scale 0.6 (rotate 30 img1))</code></strong>
<img src="images/image-cat-1b.png"/>
</pre>
          </blockquote>
        </div>
        <p>Note that while <code class="literal">img1</code> above is a (native) image,
the scaled rotated image is not an image object.
It is a picture - a more complex value that <span class="emphasis"><em>contains</em></span> an image.
</p>
        <p class="synopsis" kind="Procedure"><span class="kind">Procedure</span><span class="ignore">: </span><a id="idm139667869768784" class="indexterm"/> <code class="function">image-write</code> <em class="replaceable"><code>picture</code></em> <em class="replaceable"><code>path</code></em></p>
        <div class="blockquote">
          <blockquote class="blockquote">
            <p>The <em class="replaceable"><code>picture</code></em> is converted to an image
(as if by using <code class="literal">-&gt;image</code>) and then it is written
to the specified <em class="replaceable"><code>path</code></em>.
The format used depends on (the lower-cased string value of) the path:
A JPG file if the name ends with <code class="literal">".jpg"</code> or <code class="literal">".jpeg"</code>;
a GIF file if the name ends with <code class="literal">".gif"</code>;
a PNG file if the name ends with <code class="literal">".png"</code>.
(Otherwise, the defalt is PNG, but that might change.)
</p>
          </blockquote>
        </div>
        <p class="synopsis" kind="Procedure"><span class="kind">Procedure</span><span class="ignore">: </span><a id="idm139667869761616" class="indexterm"/> <code class="function">image-width</code> <em class="replaceable"><code>image</code></em></p>
        <p class="synopsis" kind="Procedure"><span class="kind">Procedure</span><span class="ignore">: </span><a id="idm139667869758784" class="indexterm"/> <code class="function">image-height</code> <em class="replaceable"><code>image</code></em></p>
        <div class="blockquote">
          <blockquote class="blockquote">
            <p>Return the width or height of the given <em class="replaceable"><code>image</code></em>, in pixels.
</p>
          </blockquote>
        </div>
        <p class="synopsis" kind="Procedure"><span class="kind">Procedure</span><span class="ignore">: </span><a id="idm139667869754928" class="indexterm"/> <code class="function">-&gt;image</code> <em class="replaceable"><code>picture</code></em></p>
        <div class="blockquote">
          <blockquote class="blockquote">
            <p>Convert <em class="replaceable"><code>picture</code></em> to an image (a <code class="literal">RenderedImage</code>).
If the <em class="replaceable"><code>picture</code></em> is an image, return as-is.
Otherwise, create an empty image (a <code class="literal">BufferedImage</code> whose size is the
<em class="replaceable"><code>picture</code></em>’s bounding box), and “paint” the <em class="replaceable"><code>picture</code></em> into it.
</p>
            <pre class="screen"><span class="prompt">#|kawa:1|# </span><strong class="userinput"><code>(define c (fill (circle 10)))</code></strong>
<span class="prompt">#|kawa:2|# </span><strong class="userinput"><code>(scale 3 (hbox c (-&gt;image c)))</code></strong>
<img src="images/image-scaled-1.png"/>
</pre>
            <p>Here we take a circle <code class="literal">c</code>, and convert it to an image.
Note how when the image is scaled, the pixel artifacts are very noticable.
Also note how the origin of the image is the top-level corner,
while the origin of the original circle is its center.
</p>
          </blockquote>
        </div>
      </section>
      <section class="sect2" title="Compositing - Controlling how pictures are combined" epub:type="division" id="idm139667869745248">
        <div class="titlepage">
          <div>
            <div>
              <h3 class="title">Compositing - Controlling how pictures are combined</h3>
            </div>
          </div>
        </div>
        <p class="synopsis" kind="Procedure"><span class="kind">Procedure</span><span class="ignore">: </span><a id="idm139667869744144" class="indexterm"/> <code class="function">with-composite</code> [[<em class="replaceable"><code>compose-op</code></em>] <em class="replaceable"><code>picture</code></em>] <em class="replaceable"><code>...</code></em></p>
        <div class="blockquote">
          <blockquote class="blockquote">
            <p>Limited support - SVG and DomTerm output has not been implemented.
</p>
          </blockquote>
        </div>
      </section>
      <section class="sect2" title="Displaying and exporting pictures" epub:type="division" id="idm139667869739872">
        <div class="titlepage">
          <div>
            <div>
              <h3 class="title">Displaying and exporting pictures</h3>
            </div>
          </div>
        </div>
        <section class="sect3" title="Export to SVG" epub:type="division" id="idm139667869738912">
          <div class="titlepage">
            <div>
              <div>
                <h4 class="title">Export to SVG</h4>
              </div>
            </div>
          </div>
          <p class="synopsis" kind="Procedure"><span class="kind">Procedure</span><span class="ignore">: </span><a id="idm139667869737840" class="indexterm"/> <code class="function">picture-write-svg</code> <em class="replaceable"><code>picture</code></em> <em class="replaceable"><code>path</code></em> [<em class="replaceable"><code>headers</code></em>]</p>
          <div class="blockquote">
            <blockquote class="blockquote">
              <p>Writes the <em class="replaceable"><code>picture</code></em> to the file specified <em class="replaceable"><code>path</code></em>,
in SVG (Structered Vector Graphics) format.
If <em class="replaceable"><code>headers</code></em> is true (which is the default)
first write out the XML and DOCTYPE declarations
that should be in a well-formed standaline SVG file.
Otherwise, just write of the <code class="literal">&lt;svg&gt;</code> element.
(Modern browers should be able to display a file
consisting of just the <code class="literal">&lt;svg&gt;</code> element,
as long as it has extension <code class="literal">.svg</code>, <code class="literal">.xml</code>, or <code class="literal">.html</code>;
the latter may add some extra padding.)
</p>
            </blockquote>
          </div>
          <p class="synopsis" kind="Procedure"><span class="kind">Procedure</span><span class="ignore">: </span><a id="idm139667869729664" class="indexterm"/> <code class="function">picture-&gt;svg-node</code> <em class="replaceable"><code>picture</code></em></p>
          <div class="blockquote">
            <blockquote class="blockquote">
              <p>Returns a SVG representation of <code class="literal">picture</code>,
in the form of an <code class="literal">&lt;svg&gt;</code> element,
similar to those discussed in <a class="link" href="Creating-XML-nodes.xhtml" title="Creating XML nodes">Creating XML nodes</a>.
If you convert the <code class="literal">&lt;svg&gt;</code> element to a string,
you get formatted XML;
if you <code class="literal">write</code> the <code class="literal">&lt;svg&gt;</code> element
you get an <a class="link" href="XML-literals.xhtml" title="XML literals">XML literal</a> of form <code class="literal">"#&lt;svg&gt;...&lt;/svg&gt;"</code>.
If you <code class="literal">display</code> the <code class="literal">&lt;svg&gt;</code> element
in a DomTerm terminal you get the picture (as a picture).
This works because when you display an element in DomTerm
it gets inserted into the display.
</p>
            </blockquote>
          </div>
        </section>
        <section class="sect3" title="Display in Swing" epub:type="division" id="idm139667869721040">
          <div class="titlepage">
            <div>
              <div>
                <h4 class="title">Display in Swing</h4>
              </div>
            </div>
          </div>
          <p>These procedures require <code class="literal">(import (kawa swing))</code> in addition to
<code class="literal">(import (kawa pictures))</code>.
</p>
          <p>The convenience function <code class="literal">show-picture</code> is useful
for displaying a picture in a new (Swing) window.
</p>
          <p class="synopsis" kind="Procedure"><span class="kind">Procedure</span><span class="ignore">: </span><a id="idm139667869717728" class="indexterm"/> <code class="function">show-picture</code> <em class="replaceable"><code>picture</code></em></p>
          <div class="blockquote">
            <blockquote class="blockquote">
              <p>If this is the first call to <code class="literal">show-pictures</code>,
displays <em class="replaceable"><code>picture</code></em> in a new top-level window (using the Swing toolkit).
Sequenent calls to  <code class="literal">show-picture</code> will reuse the window.
</p>
              <pre class="screen"><span class="prompt">#|kawa:1|# </span><strong class="userinput"><code>(import (kawa swing) (kawa pictures))</code></strong>
<span class="prompt">#|kawa:2|# </span><strong class="userinput"><code>(show-picture <em class="replaceable"><code>some-picture</code></em>)</code></strong>
<span class="prompt">#|kawa:3|# </span><strong class="userinput"><code>(set-frame-size! &amp;D[200 200])</code></strong> ; Adjust window size
<span class="prompt">#|kawa:4|# </span><strong class="userinput"><code>(show-picture <em class="replaceable"><code>some-other-picture</code></em>)</code></strong>
</pre>
            </blockquote>
          </div>
          <p class="synopsis" kind="Procedure"><span class="kind">Procedure</span><span class="ignore">: </span><a id="idm139667869709072" class="indexterm"/> <code class="function">picture-&gt;jpanel</code> <em class="replaceable"><code>picture</code></em></p>
          <div class="blockquote">
            <blockquote class="blockquote">
              <p>Return a <code class="literal">JPanel</code> that displays <em class="replaceable"><code>picture</code></em>.
You can change the displayed picture by:
</p>
              <pre class="screen">(set! <em class="replaceable"><code>panel</code></em>:picture <em class="replaceable"><code>some-other-picture</code></em>)
</pre>
            </blockquote>
          </div>
          <p class="synopsis" kind="Procedure"><span class="kind">Procedure</span><span class="ignore">: </span><a id="idm139667869703616" class="indexterm"/> <code class="function">set-frame-size!</code> <em class="replaceable"><code>size</code></em> [<em class="replaceable"><code>frame</code></em>]</p>
          <div class="blockquote">
            <blockquote class="blockquote">
              <p>If <em class="replaceable"><code>frame</code></em> is specified, set its size.
Otherwise, remember the size for future <code class="literal">show-picture</code> calls;
if there is already a <code class="literal">show-picture</code> window, adjust its size.
</p>
            </blockquote>
          </div>
        </section>
        <section class="sect3" title="Convert to image" epub:type="division" id="idm139667869698304">
          <div class="titlepage">
            <div>
              <div>
                <h4 class="title">Convert to image</h4>
              </div>
            </div>
          </div>
          <p>You can convert a picture to an image using the <code class="literal">-&gt;image</code> procedure,
or write it to a file using the <code class="literal">image-write</code> procedure.
</p>
        </section>
      </section>
    </section>
    <footer>
      <div class="navfooter">
        <ul>
          <li>
            <b class="toc">
              <a href="Composable-pictures.xhtml#idm139667870078896">Coordinates - points and dimensions</a>
            </b>
          </li>
          <li>
            <b class="toc">
              <a href="Composable-pictures.xhtml#idm139667870053184">Shapes</a>
            </b>
          </li>
          <li>
            <b class="toc">
              <a href="Composable-pictures.xhtml#idm139667870019904">Colors and paints</a>
            </b>
          </li>
          <li>
            <b class="toc">
              <a href="Composable-pictures.xhtml#idm139667869985312">Filling a shape with a color</a>
            </b>
          </li>
          <li>
            <b class="toc">
              <a href="Composable-pictures.xhtml#idm139667869973952">Stroking (outlining) a shape</a>
            </b>
          </li>
          <li>
            <b class="toc">
              <a href="Composable-pictures.xhtml#idm139667869946288">Affine transforms</a>
            </b>
          </li>
          <li>
            <b class="toc">
              <a href="Composable-pictures.xhtml#idm139667869868832">Combining pictures</a>
            </b>
          </li>
          <li>
            <b class="toc">
              <a href="Composable-pictures.xhtml#idm139667869799600">Images</a>
            </b>
          </li>
          <li>
            <b class="toc">
              <a href="Composable-pictures.xhtml#idm139667869745248">Compositing - Controlling how pictures are combined</a>
            </b>
          </li>
          <li>
            <b class="toc">
              <a href="Composable-pictures.xhtml#idm139667869739872">Displaying and exporting pictures</a>
            </b>
          </li>
        </ul>
        <p>
          Up: <a accesskey="u" href="Miscellaneous.xhtml">Miscellaneous topics</a></p>
        <p>
        Next: <a accesskey="n" href="Building-JavaFX-applications.xhtml">Building JavaFX applications</a></p>
      </div>
    </footer>
  </body>
</html>
